<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <Header title="招聘消息中心" />

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-4 py-6">
      <div class="flex gap-6">
        <!-- 左侧消息列表 -->
        <div class="w-1/3 bg-white rounded-lg shadow-sm">
          <!-- 搜索和筛选 -->
          <div class="p-4 border-b">
            <div class="relative mb-4">
              <input 
                type="text" 
                placeholder="搜索联系人或消息内容" 
                class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
              >
              <i class="ri-search-line absolute left-3 top-2.5 text-gray-400"></i>
            </div>
            
            <div class="flex space-x-2">
              <button 
                v-for="filter in messageFilters"
                :key="filter.key"
                @click="activeFilter = filter.key"
                :class="[
                  'px-3 py-1.5 rounded-full text-sm transition-colors',
                  activeFilter === filter.key 
                    ? 'bg-primary text-white' 
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                ]"
              >
                {{ filter.label }}
                <span v-if="filter.count > 0" class="ml-1 bg-white bg-opacity-20 px-1.5 py-0.5 rounded-full text-xs">
                  {{ filter.count }}
                </span>
              </button>
            </div>
          </div>

          <!-- 消息列表 -->
          <div class="max-h-[600px] overflow-y-auto">
            <CommunicationListItem 
              v-for="conversation in filteredConversations"
              :key="conversation.id"
              :conversation="conversation"
              :active="selectedConversationId === conversation.id"
              @click="selectConversation(conversation.id)"
            />
          </div>
        </div>

        <!-- 右侧聊天区域 -->
        <div class="flex-1 bg-white rounded-lg shadow-sm flex flex-col">
          <CommunicationChatArea 
            v-if="selectedConversation"
            :conversation="selectedConversation"
          />
          <div v-else class="flex-1 flex items-center justify-center text-gray-500">
            <div class="text-center">
              <i class="ri-message-3-line text-6xl mb-4 text-gray-300"></i>
              <p class="text-lg">选择一个对话开始沟通</p>
              <p class="text-sm mt-2">与候选人保持良好的沟通，提升招聘效率</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷操作面板 -->
      <div class="mt-6 bg-white rounded-lg shadow-sm p-6">
        <h3 class="text-lg font-medium text-gray-800 mb-4">快捷操作</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <button 
            @click="createTemplate"
            class="p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors text-center"
          >
            <i class="ri-file-text-line text-2xl text-primary mb-2"></i>
            <div class="text-sm font-medium">消息模板</div>
            <div class="text-xs text-gray-500">创建常用回复</div>
          </button>
          
          <button 
            @click="scheduleInterview"
            class="p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors text-center"
          >
            <i class="ri-calendar-line text-2xl text-primary mb-2"></i>
            <div class="text-sm font-medium">安排面试</div>
            <div class="text-xs text-gray-500">快速预约面试</div>
          </button>
          
          <button 
            @click="batchMessage"
            class="p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors text-center"
          >
            <i class="ri-mail-send-line text-2xl text-primary mb-2"></i>
            <div class="text-sm font-medium">群发消息</div>
            <div class="text-xs text-gray-500">批量发送通知</div>
          </button>
          
          <button 
            @click="exportData"
            class="p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors text-center"
          >
            <i class="ri-download-line text-2xl text-primary mb-2"></i>
            <div class="text-sm font-medium">导出记录</div>
            <div class="text-xs text-gray-500">下载沟通记录</div>
          </button>
        </div>
      </div>
    </main>

    <!-- 消息模板模态框 -->
    <MessageTemplateModal 
      v-if="showTemplateModal"
      @close="showTemplateModal = false"
      @save="saveTemplate"
    />

    <!-- 面试安排模态框 -->
    <InterviewScheduleModal 
      v-if="showInterviewModal"
      @close="showInterviewModal = false"
      @schedule="scheduleInterviewConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useMessagesStore } from '../stores/messages'
import Header from '../components/Header.vue'
import CommunicationListItem from '../components/CommunicationListItem.vue'
import CommunicationChatArea from '../components/CommunicationChatArea.vue'
import MessageTemplateModal from '../components/MessageTemplateModal.vue'
import InterviewScheduleModal from '../components/InterviewScheduleModal.vue'

const messagesStore = useMessagesStore()

const searchQuery = ref('')
const activeFilter = ref('all')
const selectedConversationId = ref<string | null>(null)
const showTemplateModal = ref(false)
const showInterviewModal = ref(false)

const messageFilters = [
  { key: 'all', label: '全部', count: 0 },
  { key: 'unread', label: '未读', count: 3 },
  { key: 'interview', label: '面试', count: 1 },
  { key: 'offer', label: 'Offer', count: 0 }
]

const filteredConversations = computed(() => {
  let conversations = messagesStore.conversations
  
  if (searchQuery.value) {
    conversations = conversations.filter(conv => 
      conv.lastMessage.content.includes(searchQuery.value)
    )
  }
  
  if (activeFilter.value === 'unread') {
    conversations = conversations.filter(conv => conv.unreadCount > 0)
  }
  
  return conversations
})

const selectedConversation = computed(() => 
  selectedConversationId.value 
    ? messagesStore.conversations.find(conv => conv.id === selectedConversationId.value)
    : null
)

const selectConversation = (conversationId: string) => {
  selectedConversationId.value = conversationId
  messagesStore.markAsRead(conversationId)
}

const createTemplate = () => {
  showTemplateModal.value = true
}

const scheduleInterview = () => {
  showInterviewModal.value = true
}

const batchMessage = () => {
  alert('批量消息功能开发中...')
}

const exportData = () => {
  alert('导出功能开发中...')
}

const saveTemplate = (template: any) => {
  alert('模板已保存')
  showTemplateModal.value = false
}

const scheduleInterviewConfirm = (interview: any) => {
  alert('面试已安排')
  showInterviewModal.value = false
}

// 默认选择第一个对话
if (messagesStore.conversations.length > 0) {
  selectedConversationId.value = messagesStore.conversations[0].id
}
</script>
